<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <my-com></my-com>

</div>

<template id="mycom">
    <div>
        <div>我是第一个组件</div>
        <p>我是p标签</p>
    </div>
</template>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    /*
    * 我们可以在页面使用 template 标签去定义组件的结构
    * 然后在定义组件的时候通过选择器来指定这个组件的结构
    * */
    Vue.component('my-com', {
        template: `#mycom`
    });

    const vm = new Vue({
        el: '#app',
        data: {
            n: 1,
        },

    })

</script>

</html>
